// components/banner/banner.js
Component({
    externalClasses: ['custom-class', 'indicator-view-class', 'indicator-class'],
    properties: {
        list: {
            type: Array,
            value: []
        },
        height: {
            type: String,
            value: '312rpx'
        },
        radius: {
            type: String,
            value: '20rpx'
        },
        fit: {
            type: String,
            value: 'cover'
        },
        circular: {
            type: Boolean,
            value: true
        },
        autoplay: {
            type: Boolean,
            value: true
        },
        interval: {
            type: Number,
            value: 5000
        },
        indicator: {
            type: Boolean,
            value: false
        },
        preview: {
            type: Boolean,
            value: false
        },
        current: {
            type: Number,
            value: 0
        }
    },
    data: {
        // indicatorIndex: 0,
    },
    methods: {
        onSwiperChange(event) {
            const { current, source } = event.detail
            if (source === 'autoplay' || source === 'touch') {
                this.setData({
                    current: current
                })
            }

            this.triggerEvent('change', current)
        },
        onClick(e) {
            const { index } = e.currentTarget.dataset
            this.triggerEvent('click', index)

            if (this.properties.preview) {
                const urls = this.properties.list.map(item => item.url)
                wx.previewImage({
                    urls,
                    current: urls[index]
                })
            }
        }
    }
})
